<template>
    <div>
        <el-dialog v-model="isShow" :title="isAdd ? '添加管理员' : '编辑管理员'" center @close="cancel(formRef)">
            <el-form :model="form" :rules="rules" ref="formRef">
                <el-form-item label="所属角色" :label-width="formLabelWidth" prop="roleid">
                    <el-select v-model="form.roleid" placeholder="请选择">
                        <el-option v-for="item in rolelist" :label="item.rolename" :key="item.id" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户名称" :label-width="formLabelWidth" prop="username">
                    <el-input v-model="form.username" autocomplete="off" />
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-if="isAdd" v-model="form.password" show-password placeholder="" autocomplete="off" />
                    <el-input v-else disabled v-model="form.password" show-password placeholder="密码为空 则不做修改"
                        autocomplete="off" />
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="form.status" :active-value="1" :inactive-value="2" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel(formRef)">取消</el-button>
                    <el-button type="primary" @click="comfirm(formRef)">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, defineProps, defineEmits, defineExpose, computed } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { userAdd, userEdit, userInfo } from '@/request/api';
import { useStore } from 'vuex'
const store = useStore()

const rolelist = computed(() => store.getters['role/getRoleList'])
const getRole = () => {
    store.dispatch('role/RoleListActions')
}
getRole()

let newId = 0

let props = defineProps({
    isShow: Boolean,
    isAdd: Boolean
})
const formLabelWidth = '140px'

let formRef = ref<FormInstance>()

let lookup = (uid: number) => {
    newId = uid
    userInfo({
        uid
    }).then((res: any) => {
        console.log(res, '获取一条数据');
        form.value = res.list
        form.value.uid = uid
        form.value.password = "";
    })
}
defineExpose({
    lookup
})

let form = ref<any>({
    roleid: '',        //角色编号
    username: '',      //管理员名称
    password: '',      //密码
    status: 1          //状态  1正常2禁用
})
const rules = reactive<FormRules>({
    roleid: [{ required: true, message: "请选择", trigger: "change" }],
    username: [
        { required: true, message: '请输入用户名称', trigger: 'blur' },
        { min: 2, max: 7, message: '长度在 2 到 7 个字符', trigger: 'blur' },
    ],
})

// 重置
let reset = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields(),
        form.value = {
            roleid: '',        //角色编号
            username: '',      //管理员名称
            password: '',      //密码
            status: 1          //状态  1正常2禁用
        }
}

let emit = defineEmits(['cancel'])
let cancel = (formEl: FormInstance | undefined) => {
    emit('cancel', false)
    reset(formEl)
}

// 确定
const comfirm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log(form.value, '表单')
            if (props.isAdd) {
                userAdd(form.value)
                    .then((res: any) => {
                        console.log(res, '管理员添加');
                        if (res.code == 200) {
                            ElMessage({
                                type: 'success',
                                message: res.msg
                            })
                            cancel(formEl)
                            store.dispatch('user/UserListActions')
                            store.dispatch('user/changeCountAction')
                        }
                    })
            } else {
                userEdit({
                    ...form.value,
                    uid: newId
                })
                    .then((res: any) => {
                        console.log(res, '管理员编辑');
                        if (res.code == 200) {
                            ElMessage({
                                type: 'success',
                                message: res.msg
                            })
                            cancel(formEl)
                            store.dispatch('user/UserListActions')
                            store.dispatch('user/changeCountAction')
                        }
                    })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>

<style scope>
</style>
